<template>
	<view class="top-window-header" :class="activePath=='/'?'lz-index':'none-index'">
		<view :class="mode">
			<view class="left">
				<navigator open-type="reLaunch" url="/pages/index/index">
					<view class="flex items-center">
						<image class="logoimage" :src="sysConfig.logo" mode="heightFix"></image>
						<view class="text-sm">{{sysConfig.siteName}}</view>
					</view>
				</navigator>
			</view>
			
			<view class="flex items-center">
				<el-menu v-if="mode=='pc'" :default-active="activePath" mode="horizontal" router size="mini" style="width: 410px;" :ellipsis="false">
					<el-menu-item index="/">首页</el-menu-item>
					<el-sub-menu index="/pages/applyAccount/aliyun/aliyun">
						<template #title>申请账号</template>
						<el-menu-item index="/pages/applyAccount/aliyun/aliyun">阿里云国际</el-menu-item>
						<el-menu-item index="/pages/applyAccount/tencentCloud/tencentCloud">腾讯云国际</el-menu-item>
						<el-menu-item index="/pages/applyAccount/AWSCloud/AWSCloud">AWS亚马逊</el-menu-item>
						<el-menu-item index="/pages/applyAccount/googleCloud/googleCloud">谷歌云国际</el-menu-item>
					</el-sub-menu>
					<el-sub-menu index="/pages/redeemVoucher/aliyun/aliyun">
						<template #title>自助充值</template>
						<el-menu-item index="/pages/redeemVoucher/aliyun/aliyun">阿里云国际</el-menu-item>
						<el-menu-item index="/pages/redeemVoucher/tencentCloud/tencentCloud">腾讯云国际</el-menu-item>
						<el-menu-item index="/pages/redeemVoucher/AWSCloud/AWSCloud">AWS亚马逊</el-menu-item>
						<el-menu-item index="/pages/redeemVoucher/googleCloud/googleCloud">谷歌云国际</el-menu-item>
					</el-sub-menu>
					<el-menu-item index="/pages/investmentCooperation/investmentCooperation">
						招商合作
					</el-menu-item>
					<el-menu-item index="/pages/helpCenter/helpCenter">
						帮助中心
					</el-menu-item>
				</el-menu>
				
				<template v-if="userInfo">
					<el-dropdown @command="commandFn">
						<view style="color: #2065FC;" class="text-xl">{{userInfo.username}}</view>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item command="a">修改密码</el-dropdown-item>
								<el-dropdown-item command="b">登出</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
				<template v-else>
					<el-button type="primary" @click="navigator('/pages/login/login')" round>登录</el-button>
					<!-- <el-button v-if="mode=='pc'" @click="navigator('/pages/register/register')">注册</el-button> -->
				</template>
				<view v-if="mode=='app'" style="margin-left: 10rpx;">
					<uni-icons type="closeempty" size="30" color="#888" v-if="appMeunShow==true"
						@click="setAppMeunShowFn(false)"></uni-icons>
					<uni-icons type="bars" size="30" color="#888" v-else @click="setAppMeunShowFn(true)"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import { ArrowDown } from '@element-plus/icons-vue'
	export default {
		data() {
			return {
				activePath: '',
			}
		},
		components:{
			ArrowDown
		},
		computed: {
			...mapState({
				appMeunShow: state => state.app.appMeunShow,
				mode: state => state.app.mode,
				sysConfig: state => state.app.sysConfig,
				userInfo: state => state.user.userInfo
			})
		},
		watch: {
			$route: {
				immediate: true,
				handler(newRoute) {
					const width = uni.getSystemInfoSync().screenWidth
					if (width >= 768) {
						let path = newRoute.path
						this.activePath = path
					}
				}
			}
		},
		mounted() {
			this.setModeFn(this)
		},
		methods: {
			...mapActions(['remove_userInfo', 'set_userInfo','set_userToken','setModeFn','setAppMeunShowFn']),
			navigator(path) {
				uni.navigateTo({
					url: path,
				});
			},
			commandFn(cmd){
				if(cmd=='a'){
					this.navigator('/pages/changePassword/changePassword')
				}else if(cmd=='b'){
					uni.showModal({
						title: '登出',
						content: '是否执行登出操作',
						success:  (res)=> {
							if (res.confirm) {
								this.remove_userInfo('')
								this.set_userInfo('')
								this.set_userToken('')
								uni.navigateTo({
									url: '/pages/login/login',
									success: res => {},
									fail: () => {},
									complete: () => {}
								});
							}
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lz-index{
		background:url('/static/image/tabBar/banner.png');
		.el-menu{
			background:transparent!important;
		}
	}
	.none-index{
		background: #fff;
	}
	.top-window-header {
		height:48px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		
		.left {
			.logoimage {
				width: 30px;
				height: 30px;
				margin-right: 10px;
			}
		}


		.pc {
			width: 100%;
			margin: auto;
			max-width: 1200px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.app {
			width: 100%;
			padding: 0 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

	}
</style>